<template>
  <view>
    <uv-sticky :offsetTop="0" :customNavHeight="0" bgColor="#fff">
      <view class="tas">
        <uv-tabs @change="tabListChange" :scrollable="false" :current="tabCurrent" :lineColor="diyData.theme.color"
                 :list="tabList"></uv-tabs>
      </view>
    </uv-sticky>
    <PageBody :properties="pageBody">
      <template v-slot:body>
        <uv-cell-group>
          <uv-cell :iconStyle="{width:'40px',height:'40px'}" :icon="chat.groupIcon" @click="toChatPage(chat)" :stop="false"
                   :value="chat.noReadCount" :label="'未读消息'+chat.noReadCount+'条'" :isLink="false" v-for="chat in chatGroupData">
            <template v-slot:title>
              <view style="display: flex;margin-right: 20px">
                <text style="margin-right: 20px">{{ chat.groupName }}</text>
              </view>
            </template>
            <template v-slot:value>
              <uv-badge type="error" max="99" :value="chat.noReadCount"></uv-badge>
            </template>
          </uv-cell>
        </uv-cell-group>

        <uv-load-more v-if="isReachBottom" @loadmore="loadmore" :status="loading.status"
                      :loading-text="loading.loadingText" :loadmore-text="loading.loadmoreText"
                      nomore-text=" "/>
      </template>
    </PageBody>
  </view>
</template>

<script>
import StatusNav from '@/components/school/statusNav';
import {toLogin} from '@/libs/login.js';
import PageBody from '@/components/school/pageBody';
import {mapGetters} from "vuex";
import * as ChatApi from '@/api/chat/chat.js';
import diyJson from '@/config/diy.js';

const app = getApp();

export default {
  components: {
    StatusNav,
    PageBody
  },
  data() {
    return {
      diyData: diyJson.commonStyle,
      tabCurrent: 0,
      terminal: 'MP',
      pageBody: {
        background: 'white',
        scrollTop: 0,
        // #ifdef MP
        pageHeight: '100%',
        // #endif
        // #ifdef H5
        pageHeight: app.globalData.windows.pageBodySubNav,
        // #endif
      },

      tabList: [
        {
          "name": "活跃",
          "value": "0"
        }, {
          "name": "失效",
          "value": "1"
        }
      ],

      loading: {
        status: 'nomore',
        loadingText: '加载中',
        loadmoreText: '点击加载更多',
      },

      searchParams: {
        state: 0
      },
      chatGroupData: [],
      isReachBottom: false,
      dataPage: {
        current: 1,
        pages: 1,
        size: 10
      }
    };
  },
  computed: mapGetters(['isLogin', 'userInfo']),
  onLoad() {
  },
  onShow() {
    if (!this.isLogin) {
      toLogin();
      return;
    }
    this.getChatGroupInfo({...this.searchParams});
  },
  onPullDownRefresh() {
    this.loading.status = 'nomore';
    ChatApi.chatGroup({...this.searchParams}).then(res => {
      this.chatGroupData = res.data.records;
      this.dataPage.current = res.data.current;
      this.dataPage.pages = res.data.pages;
    })
    uni.stopPullDownRefresh();
  },
  methods: {

    // 状态切换
    tabListChange(item) {
      // console.log('tabListChange',index)
      this.searchParams.state = item.value
      this.loading.status = 'nomore';
      this.isReachBottom = false;
      this.getChatGroupInfo({...this.searchParams});
    },

    // 获取聊天群组
    getChatGroupInfo(params) {
      ChatApi.chatGroup(params).then(res => {
        this.chatGroupData = res.data.records;
        this.dataPage.current = res.data.current;
        this.dataPage.pages = res.data.pages;
      });
    },

    // 滚到底部
    scrolltolower() {
      this.loading.status = 'nomore';
      if (this.dataPage.current < this.dataPage.pages) {
        this.loading.status = 'loadmore';
      }
      this.isReachBottom = true;
    },
    loadmore() {
      if (this.dataPage.current < this.dataPage.pages) {
        this.loading.status = 'loading';
        ChatApi.chatGroup({...this.searchParams, current: this.dataPage.current + 1}).then(res => {
          res.data.records.forEach(item => {
            this.chatGroupData.push(item)
          })
          this.dataPage.current = res.data.current;
          this.dataPage.pages = res.data.pages;
          this.loading.status = 'loadmore';
        })
      }
    },

    toChatPage(item) {

      // if (item.state === 0) {

      if (item.ref === 'CUSTOMER') {
        uni.navigateTo({
          url: '/pages/users/kefu/index'
        })
        return;
      }

      let params = {
        "refId": item.refId
        , "chatType": item.chatType
        , "groupId": item.groupId
        , "state": item.state
      };
      this.$store.commit('SET_JUMP_INFO', params);
      uni.navigateTo({
        url: '/pages/school/chat/window/index'
      })
      // }else {
      //   uni.showToast({
      //     title: "订单已完成，关闭聊天框",
      //     icon: "none"
      //   })
      // }
    },

    goback() {
      // #ifdef H5
      return history.back();
      // #endif
      // #ifndef H5
      return uni.navigateBack({
        delta: 1,
      })
      // #endif
    },
  },
  onReachBottom() {
    this.isReachBottom = true;
  }
}
</script>
<style scoped lang="scss">

.logOutClass {
  margin: 100rpx 0;
  padding: 0 40rpx;
}

.uv-empty {
  background-color: transparent !important;
}
</style>
